<template>
	<view class="rescue-records-container">
		
		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'all' }"
				@click="setFilter('all')"
			>
				全部
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'tire' }"
				@click="setFilter('tire')"
			>
				换胎
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'tow' }"
				@click="setFilter('tow')"
			>
				拖车
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: activeFilter === 'jump' }"
				@click="setFilter('jump')"
			>
				搭电
			</view>
		</view>
		
		<!-- 记录列表 -->
		<view class="records-list" v-if="filteredRecords.length > 0">
			<view 
				class="record-card" 
				v-for="(record, index) in filteredRecords" 
				:key="record.id"
				@click="viewRecordDetail(record)"
			>
				<view class="record-header">
					<view class="record-type-section">
						<!-- <view class="record-type-badge" :class="getTypeClass(record.type)">
							{{ record.type }}
						</view> -->
						<!-- <view class="record-status" :class="getStatusClass(record.status)">
							{{ record.status }}
						</view> -->
					</view>
					<text class="record-date">{{ formatDate(record.date) }}</text>
				</view>
				
				<view class="record-details">
					<view class="detail-item">
						<text class="detail-label">订单编号:</text>
						<text class="detail-value">{{ record.orderNo }}</text>
					</view>
					<view class="detail-item" v-if="record.location">
						<text class="detail-label">位置:</text>
						<text class="detail-value">{{ record.location }}</text>
					</view>
					<view class="detail-item" v-if="record.startPoint">
						<text class="detail-label">起点:</text>
						<text class="detail-value">{{ record.startPoint }}</text>
					</view>
					<view class="detail-item" v-if="record.endPoint">
						<text class="detail-label">终点:</text>
						<text class="detail-value">{{ record.endPoint }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">车牌:</text>
						<text class="detail-value">{{ record.plate }}</text>
					</view>
					<view class="detail-item" v-if="record.amount">
						<text class="detail-label">费用:</text>
						<text class="detail-value amount">¥{{ record.amount }}</text>
					</view>
				</view>
				
				<view class="record-actions">
					<view class="action-btn" @click.stop="reorderService(record)">
						<text class="action-text">再次预约</text>
					</view>
					<view class="action-btn" @click.stop="contactService(record)">
						<text class="action-text">联系客服</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/emergency/椭圆 3 拷贝 2.png" class="empty-icon"></image>
			<text class="empty-text">暂无救援记录</text>
			<text class="empty-desc">您还没有进行过救援服务</text>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				activeFilter: 'all', // 当前选中的筛选标签
				// 救援记录数据 - 后期从API获取
				rescueRecords: [
					{
						id: 1,
						type: "换胎",
						status: "已完成",
						date: "2024-01-15",
						orderNo: "121212112487878",
						location: "洛阳市道北路32号XXX小区",
						startPoint: "",
						endPoint: "",
						plate: "奔驰FWE4/豫A98FHJ",
						amount: "150.00"
					},
					{
						id: 2,
						type: "拖车",
						status: "已完成",
						date: "2024-01-10",
						orderNo: "121212112487879",
						location: "",
						startPoint: "洛阳市道北路32号XXX小区",
						endPoint: "洛阳市道北路39号XXXXXX小区",
						plate: "奔驰FWE4/豫A98FHJ",
						amount: "300.00"
					},
					{
						id: 3,
						type: "搭电",
						status: "已完成",
						date: "2024-01-05",
						orderNo: "121212112487880",
						location: "洛阳市道北路32号XXX小区",
						startPoint: "",
						endPoint: "",
						plate: "奔驰FWE4/豫A98FHJ",
						amount: "80.00"
					}
				]
			}
		},
		computed: {
			// 根据筛选条件过滤记录
			filteredRecords() {
				if (this.activeFilter === 'all') {
					return this.rescueRecords;
				}
				return this.rescueRecords.filter(record => {
					switch (this.activeFilter) {
						case 'tire':
							return record.type === '换胎';
						case 'tow':
							return record.type === '拖车';
						case 'jump':
							return record.type === '搭电';
						default:
							return true;
					}
				});
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 设置筛选条件
			setFilter(filter) {
				this.activeFilter = filter;
			},
			// 刷新记录
			refreshRecords() {
				this.loading = true;
				// 模拟刷新数据
				setTimeout(() => {
					this.loading = false;
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				}, 1000);
				
				// 后期真实接口调用：
				/*
				this.fetchRescueRecords();
				*/
			},
			// 查看记录详情
			viewRecordDetail(record) {
				console.log('查看记录详情:', record);
				uni.showToast({
					title: '查看详情功能开发中',
					icon: 'none'
				});
			},
			// 再次预约服务
			reorderService(record) {
				console.log('再次预约服务:', record);
				uni.showModal({
					title: '再次预约',
					content: `确定要再次预约${record.type}服务吗？`,
					success: (res) => {
						if (res.confirm) {
							// 跳转到应急救援页面
							uni.navigateTo({
								url: '/pages/emergency/emergency'
							});
						}
					}
				});
			},
			// 联系客服
			contactService(record) {
				console.log('联系客服:', record);
				uni.showModal({
					title: '联系客服',
					content: '确定要联系客服吗？',
					success: (res) => {
						if (res.confirm) {
							// 这里可以调用拨打电话或跳转客服页面
							uni.showToast({
								title: '正在连接客服...',
								icon: 'none'
							});
						}
					}
				});
			},
			// 获取类型样式类
			getTypeClass(type) {
				switch (type) {
					case '换胎':
						return 'type-tire';
					case '拖车':
						return 'type-tow';
					case '搭电':
						return 'type-jump';
					default:
						return '';
				}
			},
			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case '已完成':
						return 'status-completed';
					case '进行中':
						return 'status-processing';
					case '已取消':
						return 'status-cancelled';
					default:
						return '';
				}
			},
			// 格式化日期
			formatDate(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			// 获取救援记录（后期API调用）
			fetchRescueRecords() {
				this.loading = true;
				// 模拟API调用
				setTimeout(() => {
					this.loading = false;
					// 这里处理API返回的数据
				}, 1000);
				
				// 后期真实接口调用示例：
				/*
				uni.request({
					url: 'your-api-endpoint/rescue-records',
					method: 'GET',
					success: (res) => {
						this.loading = false;
						if (res.data.success) {
							this.rescueRecords = res.data.data;
						}
					},
					fail: (err) => {
						this.loading = false;
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
					}
				});
				*/
			}
		},
		// 生命周期
		onLoad() {
			// 页面加载时获取数据
			this.fetchRescueRecords();
		}
	}
</script>

<style scoped>
	.rescue-records-container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}



	/* 筛选标签 */
	.filter-tabs {
		display: flex;
		background-color: white;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		gap: 20rpx;
	}

	.filter-tab {
		padding: 16rpx 32rpx;
		border-radius: 25rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f9fa;
		transition: all 0.3s;
	}

	.filter-tab.active {
		background-color: #3183FB;
		color: white;
	}

	/* 记录列表 */
	.records-list {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.record-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s;
	}

	.record-card:active {
		transform: scale(0.98);
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.record-type-section {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.record-type-badge {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: white;
		font-weight: 500;
	}

	.record-type-badge.type-tire {
		background-color: #ff6b6b;
	}

	.record-type-badge.type-tow {
		background-color: #4ecdc4;
	}

	.record-type-badge.type-jump {
		background-color: #45b7d1;
	}

	.record-status {
		padding: 6rpx 16rpx;
		border-radius: 15rpx;
		font-size: 22rpx;
		color: white;
	}

	.record-status.status-completed {
		background-color: #51cf66;
	}

	.record-status.status-processing {
		background-color: #ffd43b;
	}

	.record-status.status-cancelled {
		background-color: #ff6b6b;
	}

	.record-date {
		font-size: 26rpx;
		color: #7f8c8d;
	}

	.record-details {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-bottom: 24rpx;
	}

	.detail-item {
		display: flex;
		align-items: flex-start;
	}

	.detail-label {
		font-size: 28rpx;
		color: #2c3e50;
		font-weight: 500;
		width: 160rpx;
		flex-shrink: 0;
	}

	.detail-value {
		font-size: 28rpx;
		color: #34495e;
		flex: 1;
		line-height: 1.4;
	}

	.detail-value.amount {
		color: #e74c3c;
		font-weight: bold;
	}

	/* 操作按钮 */
	.record-actions {
		display: flex;
		gap: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-btn {
		flex: 1;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 15rpx;
		text-align: center;
		transition: all 0.3s;
	}

	.action-btn:active {
		background-color: #e9ecef;
	}

	.action-text {
		font-size: 26rpx;
		color: #3183FB;
		font-weight: 500;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;
		text-align: center;
	}

	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		color: #7f8c8d;
		margin-bottom: 16rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #bdc3c7;
	}

	/* 加载状态 */
	.loading-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 30rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #7f8c8d;
	}

	/* 响应式调整 */
	@media (max-width: 480px) {
		.record-card {
			padding: 24rpx;
		}
		
		.detail-item {
			flex-direction: column;
			gap: 8rpx;
		}
		
		.detail-label {
			width: 100%;
		}
		
		.record-actions {
			flex-direction: column;
		}
	}
</style>